<template>
  <div>
    <a
      @click.prevent
      href="http://www.baidu.com"
    >不要跳转到百度1</a>
    <br><br>
    <a
      @click.prevent="twoFn(10)"
      href="http://www.baidu.com"
    >不要跳转到百度2</a>
    <br><br>
    <button @click.once="btnFn">点击抽奖一次</button>
    <div @click="fatherFn">
      父元素
      <button @click.stop="sonFn">子元素</button>
      <a
        @click.prevent.stop="twoFn(10)"
        href="http://www.baidu.com"
      >不要跳转到百度3</a>
    </div>
  </div>
</template>

<script>
export default {
  // 函数/方法放 methods 结构中
  methods: {
    twoFn(number) {
      console.log(number);
    },
    btnFn() {
      alert("恭喜你抽取到5元玛莎拉蒂代金券");
    },
    fatherFn() {
      console.log("父元素事件处理函数触发了");
    },
    sonFn() {
      console.log("子元素事件处理函数触发了");
    },
  },
};
</script>

<style>
</style>